<template>
  <div class="personal-wrap">
    <el-dialog
      v-loading="loading"
      element-loading-text="正在检测认证流程..."
      element-loading-spinner="el-icon-loading"
      custom-class="personal-dialog"
      :visible.sync="personDialogFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :fullscreen="true"
      :show-close="false"
    >
      <div class="explain-top">
        <div class="explain-top-content">
          <h1>云木屋</h1>
          <span>企业认证</span>
        </div>
      </div>
      <div class="personal-dialog-content">
        <div v-show="stepNum<4" class="dialog-step">
          <div class="step-item step-one step-active">
            <span>1</span>
            <p>填写认证信息</p>
          </div>
          <div class="step-item step-two" :class="{'step-active':stepNum > 1 }">
            <span>2</span>
            <p>绑定企业对公账户</p>
          </div>
          <div class="step-item step-three" :class="{'step-active':stepNum > 2}">
            <span>3</span>
            <p>二次验证</p>
          </div>
          <div
            class="step-item step-four"
            :class="{'step-active':stepNum > 3}"
            @click="selectStep(4)"
          >
            <span>✔</span>
            <p>认证成功</p>
          </div>
        </div>
        <!-- 填写认证信息 -->
        <div
          v-if="stepNum==1"
          class="personal-form"
          v-loading="formLoading"
          element-loading-text="提交中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, .8)"
        >
          <el-form ref="oneForm" label-width="140px">
            <el-form-item label="企业名称：">
              <el-input v-model="vertifyParams.company_name" placeholder="请输入企业名称"></el-input>
            </el-form-item>
            <el-form-item label="行业类型：">
              <el-select v-model="vertifyParams.trade_type_id" placeholder="请选择行业类型">
                <el-option
                  v-for="item in industryType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业地址：">
              <el-input v-model="vertifyParams.company_address" placeholder="请输入企业详细地址"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码：">
              <el-input v-model="vertifyParams.uniCredit" placeholder="请输入统一社会信用代码"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input v-model="vertifyParams.company_phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="法人名称：">
              <el-input v-model="vertifyParams.agent" placeholder="请输入法人名称"></el-input>
            </el-form-item>
            <el-form-item label="法人证件类型：">
              <el-select v-model="vertifyParams.agent_idcard_type" placeholder="请选择法人证件类型">
                <el-option
                  v-for="item in personCardType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="法人证件号码：">
              <el-input v-model="vertifyParams.agent_idcard" placeholder="请输入法人证件号码"></el-input>
            </el-form-item>
            <el-form-item label="法人手机号码：">
              <el-input v-model="vertifyParams.phone" placeholder="请输入法人手机号码"></el-input>
            </el-form-item>
          </el-form>
          <div class="personal-btn">
            <span></span>
            <el-button @click="_companyVertify">提交认证</el-button>
          </div>
        </div>

        <!-- 绑定企业对公账户 -->
        <div
          v-else-if="stepNum==2"
          class="personal-form"
          v-loading="formLoading"
          element-loading-text="提交中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, .8)"
        >
          <el-form ref="oneForm" label-width="140px">
            <el-form-item label="开户银行省份：">
              <el-select
                v-model="saveBandCardParams.province"
                @change="getCitiesList(saveBandCardParams.province)"
                placeholder="请选择开户银行省份"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开户银行县市：">
              <el-select v-model="saveBandCardParams.city" placeholder="请选择开户银行县市">
                <el-option
                  v-for="item in citiesList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开户银行企业名称：">
              <el-select
                v-model="saveBandCardParams.parentBankName"
                placeholder="请选择开户银行企业名称"
                @change="getBankName"
              >
                <el-option
                  v-for="item in bankList"
                  :key="item.id"
                  :label="item.bankName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开户银行支行名称：">
              <el-select
                v-model="saveBandCardParams.bankName"
                filterable
                :disabled="saveBandCardParams.province == '' || saveBandCardParams.city == '' || saveBandCardParams.parentBankName == '' "
                placeholder="请选择开户银行企业名称"
              >
                <el-option
                  v-for="item in chilBankList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业对公账户：">
              <el-input v-model="saveBandCardParams.accountNo" placeholder="请输入企业对公账户"></el-input>
            </el-form-item>
          </el-form>
          <div class="personal-btn">
            <span></span>
            <el-button @click="_companySaveBandCard">提交认证</el-button>
          </div>
        </div>

        <!-- 二次验证 -->
        <div
          v-else-if="stepNum==3"
          class="personal-form"
          v-loading="formLoading"
          element-loading-text="提交中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, .8)"
        >
          <el-form ref="oneForm" label-width="140px">
            <el-form-item label="手机号码：">
              <el-input v-model="getCodeParams.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>

            <el-form-item label="短信验证码：">
              <el-input
                v-model="empowerParams.code"
                placeholder="请输入短信验证码"
                @click="_registerGetYstCode"
              ></el-input>
              <span v-if="!downShow" class="getCode" @click="_registerGetYstCode">获取验证码</span>
              <span v-else class="getCode getCode-wait">{{downNum}}秒后重新发送</span>
            </el-form-item>
          </el-form>
          <div class="personal-btn">
            <span></span>
            <el-button @click="_registerEmpower">提交认证</el-button>
          </div>
        </div>

        <!-- 认证成功 -->
        <div v-else-if="stepNum==4" class="personal-result">
          <img src="@/assets/icon-success.png" alt />
          <h1>实名认证成功，离云木屋更近了一步~</h1>
          <p @click="goContractServices">去开通电子合同服务 ></p>
        </div>

        <!-- 认证审核中 -->
        <div v-else-if="stepNum==5" class="personal-result stepNum5">
          <img src="@/assets/authentication/contract3.png" alt />
          <h1>审核中~</h1>
          <p class="width-p">您的申请已提交，请耐心等待平台审核！</p>
          <p class="width-p">如有疑问请联系：400-156-8818</p>
        </div>

        <!-- 审核回退 -->
        <div v-else-if="stepNum==6" class="personal-result stepNum5">
          <img src="@/assets/authentication/contract3.png" alt />
          <h1>审核回退</h1>
          <p @click="_companyInit">重新认证</p>
        </div>

        <!-- 审核失败 -->
        <div v-else-if="stepNum==7" class="personal-result stepNum5">
          <img src="@/assets/authentication/contract4.png" alt />
          <h1>审核失败</h1>
          <p @click=" _companyAgain">重新认证</p>
        </div>

        <!-- 实名认证流程异常 -->
        <div v-else-if="stepNum==8" class="certified-wrap">
          <img class="success-img" src="@/assets/icon-fail.png" alt />
          <h1>实名认证流程异常</h1>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  personGetIdTpye,
  personVertify,
  companyGetVertifyData,
  companyVertify,
  companyGetParentBank,
  getProvinceAjax,
  getCityAjax,
  companyGetChildBank,
  companySaveBandCard,
  registerGetYstMobile,
  registerGetYstCode,
  registerEmpower,
  companyAgain,
  companyInit,
  register,
  getTradeTypeAjax
} from "@/api/authentication";
export default {
  computed: {
    ...mapGetters(["memberInfo"])
  },
  data() {
    return {
      formLoading: false,
      loading: false,
      personDialogFlag: true,
      stepNum: 1,
      downNum: "",
      downShow: false,
      empowerUrl: "www.baidu.com",
      // 企业实名认证信息参数
      vertifyParams: {
        company_name: "",
        trade_type_id: "",
        company_address: "",
        company_phone: "",
        uniCredit: "",
        agent: "",
        agent_idcard_type: "1",
        agent_idcard: "",
        phone: ""
      },
      saveBandCardParams: {
        accountNo: "",
        province: "",
        city: "",
        parentBankName: "",
        bankName: ""
      },
      getCodeParams: {
        action: 9,
        phone: ""
      },
      empowerParams: {
        code: ""
      },
      industryType: [],

      bankList: [],
      chilBankList: [],
      citiesList: [],
      provinceList: [],
      personCardType: []
    };
  },
  mounted() {
    this.loading = true;
    this._getProvinceAjax();
    this._personGetIdTpye();
    this.getParentBank();
    this._getYstMobile();
    this._getTradeType();
    // this.stepNum = 1;
    console.log("路由CODE", this.$route.params.code);
    if (this.$route.params.code) {
      let resCode = this.$route.params.code;
      this.stepDistribute(resCode);
    } else {
      this._register();
    }
    // let resCode = this.$route.params.code;
    // this.stepDistribute(resCode);

    // this._companyGetVertifyData();
  },
  methods: {
    // 获取行业类型列表
    _getTradeType() {
      getTradeTypeAjax().then(res => {
        console.log("行业类型res", res);
        if (res.code == 1) {
          this.industryType = res.data;
          console.log("行业类型", this.industryType);
        } else {
          this.$message.error(res.msg || " 网络太慢了，请重试");
        }
      });
    },
    // 实名认证检测
    _register() {
      register().then(res => {
        console.log("实名认证检测res", res);
        let testCode = res.code;
        // let testCode = 10019;
        if (testCode == 10010) {
          // 实名认证选择页面
          this.$router.push({
            name: "explain"
          });
        } else if (testCode == 10025) {
          // 实名认证流程异常
          this.stepNum = 8;
          this.loading = false;
        } else if (
          (testCode >= 10011 && testCode <= 10014) ||
          testCode == 10021 ||
          testCode == 10022 ||
          (testCode == 10020 && this.memberInfo.yst_user_type == 1)
        ) {
          // 认证未完成跳转到个人认证页面
          this.$router.push({
            name: "personal",
            params: {
              code: testCode
            }
          });
        } else if (
          (testCode >= 10015 && testCode <= 10019) ||
          testCode == 10023 ||
          testCode == 10024 ||
          testCode == 10025 ||
          (testCode == 10020 && this.memberInfo.yst_user_type == 2)
        ) {
          // 认证未完成跳转到企业认证页面
          this.stepDistribute(testCode);
        }
      });
    },

    // 步骤分发
    stepDistribute(resCode) {
      console.log("步骤分发res", resCode);
      if (resCode == 10015 || !resCode) {
        // 第一步：企业认证信息填写
        this.stepNum = 1;
      } else if (resCode == 10016) {
        // 第二步：绑定企业对公账号
        this.stepNum = 2;
      } else if (resCode == 10018) {
        // 第三步：企业实名认证审核中
        this.stepNum = 5;
      } else if (resCode == 10019) {
        // 第四步：企业支付授权
        this.stepNum = 3;
      } else if (resCode == 10023) {
        // 企业认证审核失败
        this.stepNum = 7;
      } else if (resCode == 10020) {
        // 企业认证审核成功
        this.stepNum = 4;
      } else if (resCode == 10024) {
        // 企业认证审核回退
        this.stepNum = 6;
      } else if (resCode == 10025) {
        // 企业认证审核异常
        this.stepNum = 8;
      }
      this.loading = false;
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取身份证类型数据
    _personGetIdTpye() {
      personGetIdTpye().then(res => {
        let arr = [];
        for (let i in res.data.cardType) {
          arr.push({
            id: i,
            name: res.data.cardType[i]
          });
        }
        this.personCardType = arr;
        console.log("获取身份证类型数据", this.personCardType);
      });
    },
    // 获取省份列表数据
    _getProvinceAjax() {
      getProvinceAjax().then(res => {
        console.log("获取省份列表数据res", res.data);
        this.provinceList = res.data;
      });
    },
    // 获取云商通手机号
    _getYstMobile() {
      registerGetYstMobile().then(res => {
        if (res.code == 1) {
          this.getCodeParams.phone = res.data.phone;
        }
      });
    },
    // 获取验证码
    _registerGetYstCode() {
      if (this.getCodeParams.phone == "") {
        this.$message.error("请输入手机号");
      } else {
        registerGetYstCode(this.getCodeParams).then(res => {
          if (res.code == 1) {
            this.countDown();
            this.$message.success("发送成功，请注意查收短信");
          } else {
            this.$message.error(res.msg || "短信发送失败");
          }
        });
      }
    },
    // 二次验证-支付授权
    _registerEmpower() {
      if (this.empowerParams.code == "") {
        this.$message.error("请输入验证码");
      } else {
        this.formLoading = true;
        registerEmpower(this.empowerParams)
          .then(res => {
            if (res.code == 1) {
              this.resCode = res.data.code;
              this.stepDistribute(this.resCode);
            } else {
              this.$message.error(res.msg || "请求失败");
            }
          })
          .finally(() => {
            this.formLoading = false;
          });
      }
    },
    // 企业实名认证信息获取
    _companyGetVertifyData() {
      companyGetVertifyData().then(res => {
        if (res.code == 1) {
          console.log("企业实名认证信息", res);
          this.vertifyParams = res.data;
          // this.vertifyParams.company_name = res.data.company_name;
          // this.vertifyParams.trade_type_id = res.data.trade_type_id;
          // this.vertifyParams.company_address = res.data.company_address;
          // this.vertifyParams.company_phone = res.data.company_phone;
          // this.vertifyParams.uniCredit = res.data.uniCredit;
          // this.vertifyParams.agent = res.data.agent;
          // this.vertifyParams.agent_idcard_type = res.data.agent_idcard_type;
          // this.vertifyParams.agent_idcard = res.data.agent_idcard;
          // this.vertifyParams.phone = res.data.phone;
        }
      });
    },
    // 企业实名信息提交
    _companyVertify() {
      if (this.vertifyParams.company_name == "") {
        this.$message.error("请输入企业名称");
      } else if (this.vertifyParams.trade_type_id == "") {
        this.$message.error("请选择行业类型");
      } else if (this.vertifyParams.company_address == "") {
        this.$message.error("请输入企业地址");
      } else if (this.vertifyParams.uniCredit == "") {
        this.$message.error("请输入统一社会信用代码");
      } else if (this.vertifyParams.company_phone == "") {
        this.$message.error("请输入联系电话");
      } else if (this.vertifyParams.agent == "") {
        this.$message.error("请输入法人名称");
      } else if (this.vertifyParams.agent_idcard_type == "") {
        this.$message.error("请选择法人证件类型");
      } else if (this.vertifyParams.agent_idcard == "") {
        this.$message.error("请输入法人证件号码");
      } else if (this.vertifyParams.phone == "") {
        this.$message.error("请输入法人手机号码");
      } else {
        this.formLoading = true;
        companyVertify(this.vertifyParams)
          .then(res => {
            if (res.code == 1) {
              this.resCode = res.data.code;
              this.stepDistribute(this.resCode);
            } else {
              this.$message.error(res.msg || "请求失败");
            }
          })
          .finally(() => {
            this.formLoading = false;
          });
      }
    },
    submitHandle(num) {
      this.stepNum = num;
    },
    goContractServices() {
      this.$router.push({ name: "contractServices" });
    },
    // 获取县市列表数据
    getCitiesList(id) {
      let params = {
        province_id: id
      };
      getCityAjax(params).then(res => {
        console.log("获取县市列表数据res", res.data);
        this.citiesList = res.data;
      });
    },
    // 获取企业开户主行数据
    getParentBank() {
      companyGetParentBank().then(res => {
        console.log("主行数据res", res);
        if (res.code == 1) {
          this.bankList = res.data;
        }
      });
    },
    // 获取企业开户支行数据
    getBankName() {
      let params = {
        parentBank_id: this.saveBandCardParams.parentBankName,
        province_id: this.saveBandCardParams.province,
        city_id: this.saveBandCardParams.city
      };
      companyGetChildBank(params).then(res => {
        console.log("支行数据res", res);
        this.chilBankList = res.data;
      });
    },
    // 绑定企业对公账号
    _companySaveBandCard() {
      if (this.saveBandCardParams.province == "") {
        this.$message.error("请选择开户银行省份");
      } else if (this.saveBandCardParams.city == "") {
        this.$message.error("请选择开户银行县市");
      } else if (this.saveBandCardParams.parentBankName == "") {
        this.$message.error("请选择开户银行企业名称");
      } else if (this.saveBandCardParams.bankName == "") {
        this.$message.error("请选择开户银行支行名称");
      } else if (this.saveBandCardParams.accountNo == "") {
        this.$message.error("请输入企业对公账户");
      } else {
        this.formLoading = true;
        companySaveBandCard(this.saveBandCardParams)
          .then(res => {
            if (res.code == 1) {
              this.resCode = res.data.code;
              this.stepDistribute(this.resCode);
            } else {
              this.$message.error(res.msg || "请求失败");
            }
          })
          .finally(() => {
            this.formLoading = false;
          });
      }
    },
    // 审核失败重新认证
    _companyAgain() {
      companyAgain().then(res => {
        if (res.code == 1) {
          this.resCode = res.data.code;
          this.stepDistribute(this.resCode);
        } else {
          this.$message.error(res.msg || "请求失败");
        }
      });
    },
    // 审核回退重新认证
    _companyInit() {
      companyInit().then(res => {
        if (res.code == 1) {
          this.$route.push({
            name: "explain"
          });
        } else {
          this.$message.error(res.msg || "请求失败");
        }
      });
    }
  }
};
</script>

<style lang='scss'>
.personal-wrap {
  .personal-dialog {
    background: #f0f0f0;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
      .personal-form {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              .el-input__inner {
                width: 300px;
              }
            }
          }
        }
      }
    }
  }
}
</style>


<style lang='scss' scoped>
.personal-wrap {
  .personal-dialog {
    background: #f0f0f0;

    .explain-top {
      height: 60px;
      border-bottom: 1px solid #f1f1f1;
      box-shadow: 0px 2px 5px #f1f1f1;
      background: #fff;
      .explain-top-content {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        h1 {
          display: inline-block;
          line-height: 60px;
          font-size: 30px;
          font-weight: bold;
          background-image: linear-gradient(0deg, #ff9303 0%, #fe6018 100%);
          -webkit-background-clip: text;
          color: transparent;
          margin: 0;
        }
        span {
          display: inline-block;
          vertical-align: top;
          margin-left: 30px;
          font-size: 16px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          position: absolute;
          top: 50%;
          left: 80px;
          transform: translateY(-50%);
        }
      }
    }
    .personal-dialog-content {
      width: 1200px;
      min-height: 700px;
      padding-bottom: 70px;
      margin: 0 auto;
      background: #fff;
      overflow: hidden;
      margin-top: 20px;
      margin-bottom: 80px;
      .dialog-step {
        width: 70%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin-top: 80px;
        margin-bottom: 70px;
        .step-item {
          width: 130px;
          font-size: 16px;
          span {
            padding: 2px 15px;
            background: #bcbcbc;
            border-radius: 11px;
            color: #fff;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              width: 80px;
              height: 1px;
              background: #cccccc;
              top: 50%;
              transform: translateY(-50%);
              left: -90px;
            }
            &::after {
              content: "";
              position: absolute;
              width: 80px;
              height: 1px;
              background: #cccccc;
              top: 50%;
              transform: translateY(-50%);
              right: -90px;
            }
          }
          p {
            color: #bcbcbc;
          }
          &.step-active {
            span {
              background: #ff7f5b;
              &::after {
                background: #ff7f5b;
              }
              &::before {
                background: #ff7f5b;
              }
            }
            p {
              color: #ff7f5b;
            }
          }
          &:first-of-type {
            span {
              &::before {
                display: none;
              }
              &::after {
                background: #ff7f5b;
              }
            }
          }
          &:last-of-type {
            span {
              &::after {
                display: none;
              }
            }
          }
        }
      }
      .personal-form {
        width: 440px;
        margin: 0 auto;
        .el-form {
          .el-form-item {
            margin-bottom: 35px;
            &:last-of-type {
              margin-bottom: 50px;
            }
            .el-form-item__content {
              position: relative;
              .el-input__inner {
                width: 300px;
              }
              .getCode {
                color: #ff8765;
                position: absolute;
                right: 10px;
                display: block;
                height: 100%;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                &.getCode-wait {
                  color: #ccc;
                }
              }
            }
          }
        }
        .personal-btn {
          width: 100%;
          span {
            display: inline-block;
            width: 140px;
          }
          .el-button {
            width: 300px;
            height: 40px;
            background: #ff6f47;
            border: none;
            color: #fff;
            font-size: 16px;
            margin: 0 auto;
            &:hover {
              background: #ff7f5b;
            }
          }
        }
      }
      .personal-setPassword {
        text-align: center;
        font-size: 16px;
        color: #404040;
        margin-top: 200px;
        cursor: pointer;
      }
      .personal-result {
        text-align: center;
        img {
          width: 80px;
          height: 100px;
          margin: 110px 0 20px 0;
        }
        h1 {
          font-size: 20px;
          font-weight: bold;
          color: #111;
          margin-bottom: 30px;
        }
        p {
          font-size: 16px;
          font-weight: 400;
          color: #999;
          cursor: pointer;
        }
        &.stepNum5 {
          img {
            width: 112px;
            height: 93px;
          }
        }
      }
    }
  }
}
</style>